<!DOCTYPE html>
<html>
<head>
    <title>About</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
    <link href='http://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/font.css"/>
    <link rel="stylesheet" href="css/normalize.css"/>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <!--[if lte IE 7]>
    <link rel="stylesheet" href="css/ie7.css"/>
    <![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie8.css"/>
    <![endif]-->
    <link rel="stylesheet" href="css/sequencejs-theme.modern-slide-in.css"/>
    <link rel="stylesheet" href="css/jquery.sidr.dark.css"/>
    <link rel="stylesheet" href="css/responsive.css"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/twitter.min.js"></script>
    <script type="text/javascript" src="js/jquery.sequence-min.js"></script>
    <script type="text/javascript" src="js/jquery.sidr.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<div id="wrapper">
    <header id="header">
        <span class="top-line"></span>
        <div class="container_12">
            <div class="top-login-reg">
                <a href="#">Login</a>
                <a href="#">Register</a>
            </div>
            <div class="clear"></div>
            <div class="head-menu clearfix">
                <h1 id="logo">
                    <a href="index.html">
                        <img src="images/logo.png" alt="$SITE_NAME"/>
                    </a>
                </h1>
                <nav class="main-nav">
                    <ul id="main-menu" class="nav nav-horizontal">
                        <li class="has-sub">
                            <a href="index.html">Home</a>
                            <ul class="sub-menu">
                                <li><a href="404.html">404 page</a></li>
                                <li><a href="maintenance.html">Maintenance page</a></li>
                            </ul>
                        </li>
                        <li class="has-sub active">
                            <a href="about.html">About</a>
                            <ul class="sub-menu">
                                <li><a href="#">Who We Are</a></li>
                                <li><a href="#">How We Work</a></li>
                                <li><a href="#">Approach</a></li>
                                <li><a href="#">Mission</a></li>
                            </ul>
                        </li>
                        <li class="has-sub">
                            <a href="service.html">Service</a>
                            <ul class="sub-menu">
                                <li><a href="#">Web Design</a></li>
                                <li><a href="#">WordPress Development</a></li>
                                <li><a href="#">Graphic Design</a></li>
                                <li><a href="#">Custom Development</a></li>
                                <li><a href="#">APIs Integration</a></li>
                                <li><a href="#">Mobile Apps Development</a></li>
                                <li><a href="#">Consulting</a></li>
                                <li><a href="#">Promotion</a></li>
                            </ul>
                        </li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact-us.html">Contact us</a></li>
                    </ul>
                    <a id="btn-toogle-menu" class="btn-toogle-menu" href="#alternate-menu">
                        <span class="line-bar"></span>
                        <span class="line-bar"></span>
                        <span class="line-bar"></span>
                    </a>
                    <div id="right-menu">
                        <ul class="alternate-menu">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="service.html">Service</a></li>
                            <li><a href="portfolio.html">Portfolio</a></li>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="contact-us.html">Contact us</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
        <div class="head-about-us container_12 clearfix">
            <div class="grid_12 content-about">
                <h2 class="common-title big">About</h2>
                <p class="rs description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p>
            </div>
        </div>
    </header><!--end: #header -->

    <div class="layout-2cols sidebar-left clearfix">
        <div class="content grid_9">
            <div class="article-short clearfix">
                <h3 class="common-title tt-n mr-grid">Who We Are</h3>
                <a class="grid_5 thumb-img" href="#">
                    <img src="images/ex/th-300x187-1.jpg" alt="$TITLE"/>
                </a>
                <div class="grid_7 description">
                    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, <a href="#" class="fc-blue">WordPress plugins</a>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                </div>
            </div>
            <div class="article-short no-thumb clearfix">
                <h3 class="common-title tt-n mr-grid">Quisque condimentum</h3>
                <div class="description">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut, dolores, esse illum iure magni, maxime molestiae odio praesentium repellat repellendus veritatis vero. Ipsa, totam ullam? Ab accusamus aliquam architecto autem cumque debitis, dolorem dolores ea expedita explicabo fuga fugiat fugit ipsa iure laudantium magnam provident quaerat repellendus sapiente sint suscipit tempora tenetur totam, velit veritatis vitae voluptas voluptatum? Consequatur ea expedita impedit maiores minus perferendis quasi velit voluptatem voluptatibus!
                </div>
            </div>
            <div class="lst-article">
                <h3 class="common-title tt-n mr-grid">Team</h3>
                <div class="grid_4 article-short sml-thumb">
                    <a href="#" class="thumb-img">
                        <img src="images/ex/th-220x121-1.jpg" alt="$TITLE"/>
                    </a>
                    <h3 class="rs acticle-title"><a href="#">Marvin Solo</a></h3>
                    <p class="rs tiny-desc">Digital Artist</p>
                    <p class="rs description">Donec tincidunt auctor justo, vel elementum lacus gravida nec. Integer id diam velit.</p>
                </div>
                <div class="grid_4 article-short sml-thumb">
                    <a href="#" class="thumb-img">
                        <img src="images/ex/th-220x121-2.jpg" alt="$TITLE"/>
                    </a>
                    <h3 class="rs acticle-title"><a href="#">Jane Smith</a></h3>
                    <p class="rs tiny-desc">Art Director</p>
                    <p class="rs description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, perferendis quisquam.</p>
                </div>
                <div class="grid_4 article-short sml-thumb">
                    <a href="#" class="thumb-img">
                        <img src="images/ex/th-220x121-1.jpg" alt="$TITLE"/>
                    </a>
                    <h3 class="rs acticle-title"><a href="#">Lorem ipsum</a></h3>
                    <p class="rs tiny-desc">Digital Artist</p>
                    <p class="rs description">Donec tincidunt auctor justo, vel elementum lacus gravida nec. Integer id diam velit.</p>
                </div>
                <div class="clear"></div>
            </div>
        </div><!--end: .content -->
        <div class="sidebar grid_3">
            <div class="menu-sidebar block">
                <h3 class="common-title dark">Menu</h3>
                <nav>
                   <ul class="nav nav-vertical">
                       <li><a href="#">Who We Are</a></li>
                       <li><a href="#" class="active">How We Work</a></li>
                       <li><a href="#">Approach</a></li>
                       <li><a href="#">Mission</a></li>
                   </ul>
                </nav>
            </div>
            <div class="clear"></div>
        </div><!--end: .sidebar -->
    </div>
    <footer id="footer">
        <div class="info-line">
            <div class="container_12">
                <div class="grid_9">
                    <h2 class="rs common-title">Cras iaculis lacus vel enim ornare dapibus venenatis nunc semper</h2>
                    <p class="rs description">Cras quis enim ipsum. Nam convallis semper orci nec elementum. Donec lorem ante, sollicitudin eu feugiat vitae, egestas et risus. Integer quis nisi eu enim tincidunt rutrum.</p>
                </div>
                <div class="grid_3 ta-r">
                    <a class="btn-blue" href="#">Learn more</a>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="container_12 main-footer">
            <div class="grid_3 contact-info">
                <h3 class="rs common-title">Contact Info</h3>
                <p class="rs img-map">
                    <img src="images/ex/th-map.jpg" alt="map"/>
                </p>
                <p class="rs contact-item">
                    <span class="lbl">T.:</span>
                    <span class="val">+1 (555) 555 - 55 - 55</span>
                </p>
                <p class="rs contact-item">
                    <span class="lbl">E.:</span>
                    <a href="mailto:info@megadrupal.com" class="val">info@megadrupal.com</a>
                </p>
            </div><!--end: .contact-info -->
            <div class="recent-tweets">
                <div class="inner">
                    <h3 class="rs common-title">recent tweets</h3>
                    <div class="lst-tweets" id="sys_lst_tweets">
                        <p class="rs ta-c fc-white">
                            loading Twitter <br />
                            <img src="images/spinner.gif" alt="loading"/>
                        </p>
                    </div>
                </div>
            </div><!--end: .recent-tweets -->
            <div class="email-newsletter">
                <div class="inner">
                    <h3 class="rs common-title">Newsletter Signup</h3>
                    <p class="rs description">Nam aliquet, velit quis consequat interdum, odio dolor elementum.</p>
                    <form action="#">
                        <div class="form-email">
                            <label class="lbl" for="txt-email">
                                <input id="txt-email" type="text" class="txt-input" placeholder="Email Address"/>
                            </label>
                            <button class="btn-blue btn-submit smaller" type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div><!--end: .email-newsletter -->
            <div class="foot-menu">
                <div class="inner">
                    <h3 class="rs common-title">Menu</h3>
                    <ul class="rs">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="service.html">Service</a></li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact-us.html">Contact us</a></li>
                    </ul>
                </div>
            </div><!--end: .foot-menu -->
            <div class="clear"></div>
            <div class="lst-btn-social clearfix">
                <div class="grid_4"><a class="btn-invisible btn-twitter" href="#">Follow Us on Twitter</a></div>
                <div class="grid_4"><a class="btn-invisible btn-fb" href="#">Follow Us on Facebook</a></div>
                <div class="grid_4"><a class="btn-invisible btn-linkedin" href="#">Follow Us on LinkedIn</a></div>
            </div>
            <p class="rs copyright"><span class="lbl">Designed with love by</span> <a href="#" class="val">BestWebSoft.</a> - <span class="lbl">HTML version by</span> <a href="#">MegaDrupal</a> </p>
        </div>
    </footer><!--end: #footer -->
</div>
</body>
</html>